<template>
	<view style="position: relative;">
		<view class="top">
			<view class="background"></view>
		</view>
		<view class="user-card">
			<view class="card">
				<view class="top">
					<view class="userImage">
						<image :src="userInfo.avatarUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="user-text">
							{{userInfo.nickName}}
						</view>
						<view class="stu-id">{{userInfo.stuId}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loginOut">
			<u-button type="primary" @click="loginOut()">{{loginOutText}}</u-button>
		</view>
		<uni-list>
			<uni-list-item title="校园动态" clickable @click="testMethod('校园动态')" thumb="/static/robot.jpg">
				<template slot="footer" style="margin-top: 6rpx;">
					<uni-icons type="right" size="20"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item title="我的收藏" clickable @click="testMethod('我的收藏')" thumb="/static/robot.jpg">
				<template slot="footer" style="margin-top: 6rpx;">
					<uni-icons type="right" size="20"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item title="我的反馈" clickable @click="testMethod('我的反馈')" thumb="/static/robot.jpg">
				<template slot="footer" style="margin-top: 6rpx;">
					<uni-icons type="right" size="20"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item title="更多服务" clickable @click="testMethod('更多服务')" thumb="/static/robot.jpg">
				<template slot="footer" style="margin-top: 6rpx;">
					<uni-icons type="right" size="20"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item title="清空聊天记录" clickable @click="clearChatStorage()" thumb="/static/robot.jpg">
				<template slot="footer" style="margin-top: 6rpx;">
					<uni-icons type="right" size="20"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item title="关于小柚" clickable @click="testMethod('关于小柚')" thumb="/static/robot.jpg">
				<template slot="footer" style="margin-top: 6rpx;">
					<uni-icons type="right" size="20"></uni-icons>
				</template>
			</uni-list-item>
		</uni-list>
		<u-modal :content="modalContent" :title="modalTitle" showCancelButton :show="modalShow"
			@confrim="modalConfrim()" @cancel="modalShow=false"></u-modal>
		<u-notify ref="uNotify"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginOutText: "登录",
				userInfo: {
					avatarUrl: "../../static/unknownUser.jpg",
					nickName: "你当前尚未登录",
					stuId: ""
				},
				modalShow: false,
				modalContent: "",
				modalTitle: ""
			};
		},
		onShow() {
			this.getStorageToUserInfo()
		},
		methods: {
			getStorageToUserInfo() {
				uni.getStorage({
					key: 'UserProfile',
					success: (res) => {
						this.userInfo.avatarUrl = res.data.avatarUrl
						this.userInfo.nickName = res.data.nickName
						this.loginOutText = "注销"
					},
					fail: () => {
						this.loginOutText = "登录"
					}
				})
			},
			loginOut() {
				// #ifdef MP-WEIXIN
				if (this.loginOutText == "登录") {
					uni.getUserProfile({
						desc: "获取你的头像和昵称",
						success: (res) => {
							uni.setStorage({
								key: 'UserProfile',
								data: res.userInfo,
							})
							uni.reLaunch({
								url: '../me/me'
							});
						},
						fail: () => {
							this.$refs.uNotify.show({
								message: "登录失败",
								type: "error"
							})
						}
					})
				} else if (this.loginOutText == "注销") {
					this.modalContent = "你确定要退出登录吗？"
					this.modalTitle = "注销"
					this.modalShow = true
				}
				// #endif
				// #ifdef H5
				uni.showToast({
					title: "H5界面无法登陆"
				})
				// #endif
			},
			modalConfrim() {
				uni.removeStorage({
					key: 'UserProfile',
					success: () => {
						uni.reLaunch({
							url: '../me/me'
						});
					}
				});
			},
			clearChatStorage() {
				uni.removeStorage({
					key: 'historyMsg',
					success: () => {
						this.$refs.uNotify.show({
							message: "清除聊天记录成功",
							type: "success"
						})
					}
				});
			},
			testMethod(text) {
				this.$refs.uNotify.show({
					message: "模拟打开" + text + "(未实现)",
					type: "warning"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	button {
		margin: 30px;
	}

	.menu {
		margin-top: -20px;

		text {
			margin-left: 15px;
			font-size: 16px;
		}
	}

	.loginOut {
		position: absolute;
		top: 200rpx;
		right: 90rpx;
	}

	.top {
		height: 250rpx;
		position: relative;

		.background {
			background-color: #5199ff;
			border-bottom-left-radius: 22px;
			border-bottom-right-radius: 22px;
			position: absolute;
			height: 180rpx;
			width: 100%;
		}
	}

	.user-card {
		height: 170rpx;
		padding: 0 15px;

		.card {
			position: relative;
			bottom: 62px;
			height: 250rpx;
			background-color: white;
			border-radius: 5px;

			.top {
				height: 30%;
				position: relative;

				.userImage {
					position: absolute;
					bottom: 20%;
					left: 10%;
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					border-radius: 50%;
					border: 2px solid white;
				}
			}

			.bottom {
				display: flex;
				height: 70%;

				.left {
					width: 80%;
					height: 100%;
					position: relative;

					.user-text {
						width: 100%;
						font-size: 1.6em;
						padding-left: 80rpx;
						height: 50%;
					}

					.stu-id {
						color: #96a1ae;
						padding-left: 80rpx;
						height: 50%;
						width: 100%;
						font-size: 0.9em;
					}
				}

				.right {
					width: 20%;
					height: 50%;
				}
			}
		}
	}
</style>
